<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>登陆名</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="登陆名"
          v-model="params['loginName']"
        ></el-input>
      </el-row>
      <el-row>
        <span>状态</span>
        <el-select v-model="params['status']" clearable placeholder="状态" size="small">
          <el-option
            v-for="(item,index) in checkStatusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-row>
      <el-row style="padding-top:10px">
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>

    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" align="center" label="Id" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="loginName" align="center" label="登录名" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.loginName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" align="center" label="姓名" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="mobile" align="center" label="手机号码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="状态" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>

          <el-button
            size="mini"
            type="warning"
            @click="changeEnable(scope.row)"
            v-if="scope.row.status !== 1"
          >启用</el-button>
          <el-button
            size="mini"
            type="info"
            v-if="scope.row.status !== 0"
            @click="changeEnable(scope.row)"
          >停用</el-button>
          <el-button size="mini" type="success" @click="resetPwd(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="管理员用户名" prop="loginName">
          <el-input
            v-model="temp.loginName"
            maxlength="50"
            placeholder="管理员用户名"
            style="width:300px;"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="temp.password" type="password" placeholder="密码" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="管理员称呼" prop="name">
          <el-input v-model="temp.name" placeholder="管理员称呼" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="手机" prop="mobile">
          <el-input v-model="temp.mobile" placeholder="手机" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="temp.phone" placeholder="电话" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="email" prop="email">
          <el-input v-model="temp.email" type="email" placeholder="email" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="qq" prop="qq">
          <el-input v-model="temp.qq" placeholder="qq" style="width:500px;"></el-input>
        </el-form-item>

        <el-form-item label="所属管理组" prop="roleIdList">
          <el-select v-model="temp.roleIdList" placeholder="请选择">
            <el-option
              v-for="(item,value) in roleList"
              :key="value"
              :label="item.roleName"
              :value="item.id"
            >{{item.roleName}}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="temp.status">
            <el-radio
              v-for="(item,value) in statusFilter"
              :key="value"
              :label="value"
              :value="value"
            >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="图片" prop="headImg">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('headImg')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.headImg" :src="temp.headImg|absUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
let statusFilter = ["停用", "启用"];
let statustagFilter = ["success", "danger", "info", "warning"];
let adPositiontagFilter = ["success", "danger", "info", "warning"];
let typeBanner = ["App轮播banner", "微信轮播banner", "首页banner"];
export default {
  data() {
    return {
      tableHeight: 400,
      total: 0,
      container: false,
      list: [],
      roleList: [],
      checkStatusList: [
        {
          label: "启用",
          value: 0
        },
        {
          label: "停用",
          value: 1
        }
      ],
      params: {
        pageNo: 1,
        pageSize: 20
      },
      temp: {
        // title: "",
        // subjectName:"",
        // url:"",
        // type:"",
        // sort: "",
        status: "",
        coverImg: "",
        roleIdList: ""
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      statusFilter: statusFilter,
      typeBanner: typeBanner,
      cityIdOptions: [],
      rules: {
        loginName: [
          {
            required: true,
            message: "请输入管理员用户名",
            trigger: "change"
          }
        ],
        roleIdList: [
          {
            required: true,
            message: "请选择所属管理组",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入管理员称呼",
            trigger: "change"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change"
          }
        ],
        qq: [
          {
            required: true,
            message: "请输入QQ",
            trigger: "change"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "change"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "change"
          },
          {
            pattern: /^1[0-9]{10}$/, message: '手机号码不正确!'
          }
        ],
        email: [
          {
            required: true,
            message: "请输入Email",
            trigger: "change"
          },
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '请输入邮箱有误'
          }
        ],
        status: [
          {
            required: true,
            message: "请选中状态",
            trigger: "change"
          }
        ],
        coverImg: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.loadData();
    this.$get("/admin/manager/role/list_all").then(data => {
      this.roleList = data;
    });
    this.tableHeight = window.innerHeight - 300;
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    typeBanner(status) {
      return typeBanner[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    },
    adPositiontagFilter(status) {
      return adPositiontagFilter[parseInt(status)];
    }
  },
  methods: {
    resetPwd(row) {
      this.$post("/admin/manager/reset/pwd", {
        id: row.id
      }).then(data => {
        this.$$notify("重置成功");
      });
    },
    handleFilter() {
      this.loadData();
    },
    changeEnable(item) {
      var status = item.status;
      if (status == 0) {
        status = 1;
      } else {
        status = 0;
      }
      this.$post("/admin/manager/active", {
        id: item.id,
        activeStatus: status
      }).then(data => {
        this.loadData();
      });
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleDelete(row) {
      this.$confirm("确定删除该管理员吗?", "提示").then(_ => {
        this.$post("/admin/manager/delete", {
          id: row.id
        }).then(data => {
          this.loadData();
        });
      });
    },
    editRow(row) {
      this.dialogFormVisible = true;
      this.isEditing = true;
      this.temp = Object.assign({}, row);
    },
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          let url = "";
          if (this.isEditing) {
            url = "/admin/manager/modify";
          }
          this.$post(url, postData)
            .then(data => {
              this.loadData();
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.temp = {};
            })
            .finally(_ => {
              this.submiting = false;
            });
        }
      });
    },
    loadData() {
      this.$post("/admin/manager/list", this.params)
        .then(data => {
          this.list = data.dataList;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    }
    // exportExcelFile () {
    //   this.exportExcel({
    //     title: '广告管理',
    //     fields: [
    //       {
    //         field: 'title',
    //         title: '广告名称'
    //       },

    //       {
    //         field: 'sort',
    //         title: '顺序'
    //       },

    //       {
    //         field: 'startDate',
    //         title: '生效时间'
    //       },

    //       {
    //         field: 'endDate',
    //         title: '失效时间'
    //       },

    //       {
    //         field: 'status',
    //         title: '发布状态',
    //         valueMap: ['上线', '下线']
    //       },

    //       {
    //         field: 'createTime',
    //         title: '操作时间'
    //       },

    //       {
    //         field: 'linkAddr',
    //         title: '链接'
    //       },

    //       {
    //         field: 'cityName',
    //         title: '城市位置'
    //       },

    //       {
    //         field: 'adPosition',
    //         title: '广告位置',
    //         valueMap: ['首页底部', '首页顶部', '特价专区', '限时抢购（封面）', '限时抢购（活动页）']
    //       }
    //     ]
    //   }).then(info => {
    //     this.openWin(info)
    //   })
    // }
  }
};
</script>

<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>
